<template>
  <main>
    <div class="page-title"><h2><center>ElfTodos</center></h2></div>
    <div class="user-box">
      <div style="margin-left: 60%;">
        <a style="cursor: pointer;" v-if="!user.name" v-link="this.$router.go('/login')">Sign In to show your info here</a>
        <p v-if="user.name">{{user.name}} / {{user.group}} / <a style="cursor: pointer;" @click="this.logout()">Sign Out</a></p>
      </div>
    </div>
    <div class="page-content">
       <router-view class="view" transition="fade" transition-mode="out-in" :title="" keep-alive></router-view>
    </div>
  </main>
  
</div>

</template>

<style>
.view {
  transition: all .5s ease;
}
.fade-enter, .fade-leave {
  opacity: 0;
  transform: translate3d(10px, 0, 0);
}
</style>

<script>
import config from './config'
/* global alert */
export default {
  methods: {
    logout () {
      this.$http.get(config.apiPath + '/user/logout', {credentials: true}).then((response) => {
        console.log(response)
        this.user = {}
        this.$router.go('/login')
      }, (response) => {
        alert('error ' + response.status + '\n' + response.body)
      })
    }
  }, data () {
    return {
      user: {}
    }
  }
}

</script>
